<template>
  <div class="base-editor">
    <!-- 工具栏 -->
    <div class="editor-toolbar">
      <slot name="toolbar">
        <!-- 默认工具栏 -->
        <div class="toolbar-group">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand('bold')"
            :class="{ active: isActive('bold') }">
            B
          </button>
        </div>
      </slot>
    </div>

    <!-- 编辑区域 -->
    <div 
      class="editor-content"
      ref="content"
      contenteditable="true"
      @input="handleInput"
      @mouseup="updateSelection"
      @keyup="updateSelection">
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseEditor',
  
  props: {
    // 编辑器的值
    value: {
      type: String,
      default: ''
    },
    // 是否自动获取焦点
    autofocus: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      // 当前选区信息
      selection: {
        start: 0,
        end: 0,
        isCollapsed: true
      },
      // 是否正在组合输入（输入法）
      isComposing: false
    }
  },

  mounted() {
    // 初始化内容
    this.$refs.content.innerHTML = this.value

    // 自动获取焦点
    if (this.autofocus) {
      this.$refs.content.focus()
    }

    // 监听组合输入事件
    this.$refs.content.addEventListener('compositionstart', this.handleCompositionStart)
    this.$refs.content.addEventListener('compositionend', this.handleCompositionEnd)
  },

  beforeDestroy() {
    // 移除事件监听
    this.$refs.content.removeEventListener('compositionstart', this.handleCompositionStart)
    this.$refs.content.removeEventListener('compositionend', this.handleCompositionEnd)
  },

  methods: {
    // 处理输入事件
    handleInput() {
      if (this.isComposing) return
      this.emitChange()
    },


    // 更新选区信息
    updateSelection() {
      const sel = window.getSelection()
      if (!sel.rangeCount) return

      const range = sel.getRangeAt(0)
      this.selection = {
        start: this.getOffset(range.startContainer, range.startOffset),
        end: this.getOffset(range.endContainer, range.endOffset),
        isCollapsed: sel.isCollapsed
      }
    },

    // 获取节点的偏移量
    getOffset(node, offset) {
      // 这里先实现一个简单版本
      // 后续需要完善，考虑更复杂的DOM结构
      return offset
    },

    // 执行编辑命令
    execCommand(command, value = null) {
      document.execCommand(command, false, value)
      this.emitChange()
    },

    // 检查格式是否激活
    isActive(command) {
      return document.queryCommandState(command)
    },

    // 处理组合输入开始
    handleCompositionStart() {
      this.isComposing = true
    },

    // 处理组合输入结束
    handleCompositionEnd() {
      this.isComposing = false
      this.emitChange()
    },

    // 触发变更事件
    emitChange() {
      this.$emit('input', this.$refs.content.innerHTML)
      this.$emit('change', {
        html: this.$refs.content.innerHTML,
        text: this.$refs.content.textContent,
        selection: this.selection
      })
    }
  }
}
</script>

<style scoped>
.base-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

.editor-toolbar {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
}

.toolbar-group {
  display: flex;
  gap: 4px;
}

.toolbar-btn {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.toolbar-btn.active {
  background: #e6e6e6;
  border-color: #999;
}

.editor-content {
  min-height: 150px;
  padding: 12px;
  outline: none;
}

.editor-content:empty:before {
  content: attr(placeholder);
  color: #999;
}
</style> 